<template>
    <div class="more_box" :style="{marginTop:`${mtop} px`}">
        <div class="more_btn" :style="{ fontSize: `${props.size}px` }" @click="onMoreClick">
            <div class="more_space">
                <span>More</span>
                <n-icon :size="props.size">
                    <ChevronRightFilled />
                </n-icon>
            </div>
        </div>
    </div>
</template>

<script setup>
import { NIcon } from 'naive-ui';
import { ChevronRightFilled } from '@vicons/material';

const props = defineProps({
    size: {
        type: Number,
        default: 16
    },
    mtop:{
        type: Number,
        default: 30
    }
})

const emits = defineEmits(['onMoreClick']);

const onMoreClick = () => {
    emits('onMoreClick')
}
</script>

<style lang='less'>
.more_box {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;

    .more_btn {
        display: flex;
        align-items: center;
        color: #606266;
        letter-spacing: 2px;
        border: 1px solid #bcbcbc;
        border-radius: 4px;
        padding: 12px 20px 12px 30px;
        line-height: 1;
        transition: all .3s;

        &:hover {
            background: #3d3d3d;
            color: #fff;
            cursor: pointer;
        }

        .more_space {
            display: flex;
            align-items: center;
        }
    }

    &::before,
    &::after {
        background: #ddd;
        content: "";
        height: 1px;
        width: calc(50% - 80px);
    }

    &::before {
        margin-right: 40px;
    }

    &::after {
        margin-left: 40px;
    }
}
</style>